<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>AOS敖翔在线</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="static/css/style.css" />
		<script type="text/javascript" src="static/js/jquery.min.js" ></script>
		<script type="text/javascript" src="static/js/jquery.cookie.js"></script>
		<script type="text/javascript" src="layui/layui.all.js" ></script>
		<script type="text/javascript" src="layui/lay/modules/layer.js" ></script>
		<script src="static/js/base.js" charset="utf-8"></script>
		<script src="static/js/ax.js" charset="utf-8"></script>
		<script type="text/javascript" src="static/js/avalon.js" ></script>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
		<script src="static/js/html5.js"></script>
		<script src="static/js/respond.js"></script>
		<![endif]-->
	</head>
	<body>

	<!--主体内容-->
	<div class="layui-fluid" ms-controller="index">
		<div class="layui-row layui-col-space15" style="position: relative;">
			<div class="layui-col-md8 indexleft">
				<div class="layui-card">
					<div class="hearder_title layui-fluid"><h5 class="index_icon1">各科目考试合格率</h5></div>
					<div class="layui-fluid">
						<div class="layui-row layui-col-space20 loopfun">
							<div class="layui-col-md3 layui-col-xs6 div1"><span>科目一</span></div>
							<div class="layui-col-md3 layui-col-xs6 div2"><span>科目二</span></div>
							<div class="layui-col-md3 layui-col-xs6 div3"><span>科目三</span></div>
							<div class="layui-col-md3 layui-col-xs6 div4"><span>科目四</span></div>
						</div>
					</div>

				</div>

				<div class="layui-card margintop20">
					<div class="hearder_title layui-fluid"><h5 class="index_icon2">在培人数</h5></div>
					<div class="layui-fluid">
						<div class="layui-row layui-col-space20 numlist">
							<div class="layui-col-md3 layui-col-xs6">
								<h5><b>156</b><span>科目一</span></h5>
							</div>
							<div class="layui-col-md3 layui-col-xs6">
								<h5><b>189</b><span>科目二</span></h5>
							</div>
							<div class="layui-col-md3 layui-col-xs6">
								<h5><b>209</b><span>科目三</span></h5>
							</div>
							<div class="layui-col-md3 layui-col-xs6">
								<h5><b>224</b><span>科目四</span></h5>
							</div>
						</div>
					</div>

				</div>


			</div>
			<div class="layui-col-md4 indexright">
				<div class="layui-card paddingbt">
					<div class="hearder_title layui-fluid"><h5 class="index_icon3">消息通知<a style="float: right;font-size: 16px;color: #666666; line-height: 40px;" href="#" :click="more()">更多&gt;&gt;</a></h5></div>
					<ul class="news">
						<li :for="($index, el) in @newslist"><a href="#" :click="seeinfo(el.id)">{{el.noticeTitle}}</a><span>{{el.publishTime}}</span></li>


					</ul>
				</div>
			</div>
		</div>
		<div class="layui-card margintop20 ksnav">
			<div class="hearder_title layui-fluid"><h5 class="index_icon4">快捷入口</h5></div>
			<div class="layui-fluid">
				<ul>
					<li><a href="#"><img src="static/images/ksnav_1.png">学员录入</a></li>
					<li><a href="#"><img src="static/images/ksnav_2.png">学员管理</a></li>
					<li><a href="#"><img src="static/images/ksnav_3.png">意向录入</a></li>
					<li><a href="#"><img src="static/images/ksnav_4.png">跟进管理</a></li>
					<li><a href="#"><img src="static/images/ksnav_5.png">公共库管理</a></li>
					<li><a href="#"><img src="static/images/ksnav_6.png">车辆档案</a></li>
					<li><a href="#"><img src="static/images/ksnav_7.png">分校管理</a></li>
					<li><a href="#"><img src="static/images/ksnav_8.png">报名点管理</a></li>
					<li><a href="#"><img src="static/images/ksnav_9.png">场地管理</a></li>
					<li><a href="#"><img src="static/images/ksnav_10.png">添加</a></li>

				</ul>
			</div>
		</div>
	</div>
	<!--主体内容-->
	<script type="text/javascript" src="static/js/raphael.js" ></script>
	<script>

        var vm = avalon.define({
            $id: "index",
			newslist:[],
			//通知公告展示
			news:function () {
                ax.get({
                    url:schoolWebUrl +  '/api/aos/notice/list',
                    contentType: "application/x-www-form-urlencoded",
                    data: '',
                    success: function (r) {
                        console.log(r);
                         if(r.code==0){
                             vm.newslist=r.data.records;
                             for(var i in vm.newslist){
                                 vm.newslist[i].publishTime=vm.newslist[i].publishTime.substring(0,11)
							 }
						 }
                    },
                });
            },
			//查看
			seeinfo:function (id) {
                top.layer.open({
                    type: 2,
                    area: ['90%', '80%'],
                    fixed: true, //不固定
                    maxmin: true,
                    content: 'preview.html?id=' + id
                });
            },
			//查看更多
			more:function () {
                window.location.href = 'newslist.html';
                // top.layer.open({
                //     type: 2,
                //     area: ['90%', '80%'],
                //     fixed: true, //不固定
                //     maxmin: true,
                //     content: 'newslist.html'
                // });
            }
		});

        vm.$watch('onReady', function () {
            vm.news();
        })


        var layer;
        layui.use(['element','layer'], function(){
            var element = layui.element;
				layer=layui.layer;

            //…
        });
        window.onload=function(){
            (function(obj){
                obj.win={
                    /**
                     * 环形进度条
                     * @param el：DOM对象
                     * @param val:数值
                     * @param bg:背景颜色
                     * @param color:环颜色
                     * @param textColor：数字颜色
                     * @param fontSize：数字字体大小
                     * @param size:环宽度
                     * @param r:环内半径
                     * @param time:动画时间
                     * @param easing:动画类型:
                     *  'linear'
                     *  '<' or 'easeIn' or 'ease-in'
                     *  '>' or 'easeOut' or 'ease-out'
                     *  '<>' or 'easeInOut' or 'ease-in-out'
                     *  'backIn'or 'back-in'
                     *  'backOut' or 'back-out'
                     *  'elastic'
                     *  'bounce'
                     */
                    loopFun:function(el,val,bg,color,textColor,fontSize,size,r,time,easing){
                        var si =r+size/2;
                        var xy=r+size;
                        if(val<0||val>100){
                            return alert('请输入0~100之间的数')
                        }
                        var paper = Raphael(el,(r+size)*2,(r+size)*2);
                        paper.circle(xy,xy,r).attr({
                            'stroke-width': size,
                            stroke:bg
                        });
                        paper.customAttributes.arc=function(val){
                            var v = 360*val/100,
                                s = -180,
                                e = s+v,
                                x = xy,
                                y = xy,
                                rad = Math.PI/180,
                                x1 = x+r*Math.sin(-s*rad),
                                y1 = y+r*Math.cos(-s*rad),
                                x2 = x+r*Math.sin(-e*rad),
                                y2 = y+r*Math.cos(-e*rad),
                                path=[
                                    ['M',x1,y1],
                                    ['A',r,r,0,+(e-s>180),1,x2,y2]
                                ];
                            return {
                                path:path
                            };
                        };
                        var an = paper.path().attr({
                            'stroke-width': size,
                            stroke:color,
                            arc: 0.01
                        });
                        an.animate({
                            stroke:color,
                            arc:val
                        },time,easing);
                        setTimeout(function(){
                            if(val==100){
                                paper.circle(xy,xy,r).attr({
                                    'stroke-width': size,
                                    stroke:color
                                });
                            }
                        },time);
                        paper.customAttributes.txt=function(val){
                            return {
                                text:Math.floor(val*100)/100+'%'
                            }
                        };
                        var l = paper.text(xy,xy-12).attr({
                            txt:0,
                            'fill':textColor,
                            'font-size':fontSize,
                            'font-weight':700
                        });
                        l.animate({
                            txt:val
                        },time);
                    }
                };
            })(window);

			var r=60;
			var loopw=20;
			var loopval=50;
            if($(window).width()<500){
                  r=40;
                  loopw=10;
            }

            $(window).resize(function () {
                if($(window).width()<500){
                    r=40;
                    loopw=10;
                }
            })

            win.loopFun($('.div1')[0],loopval,'#e5e5e5','#47bac2','#47bac2','20px',loopw,r,1000,'linear');
            win.loopFun($('.div2')[0],loopval,'#e5e5e5','#47bac2','#47bac2','20px',loopw,r,1000,'linear');
            win.loopFun($('.div3')[0],loopval,'#e5e5e5','#47bac2','#47bac2','20px',loopw,r,1000,'linear');
            win.loopFun($('.div4')[0],loopval,'#e5e5e5','#47bac2','#47bac2','20px',loopw,r,1000,'linear');


        }

	</script>
	</body>
</html>
